import Taro, { Component, Config } from '@tarojs/taro'
import { View, Image, Text } from '@tarojs/components'
import './index.less'
import curtainPng from '../../../assets/login/logo1.jpg'
import { AtForm, AtInput, AtButton, AtToast } from 'taro-ui';
import { HTTP } from './../../../common/index';
import { API } from './../../../common/API';
export default class Index extends Component<{}, { phone: string, verifiCode: string, text: string, stxt: string, isOpened: boolean, icon: string }>{
    constructor(props) {
        super(props)
        this.state = {
            phone: '',
            verifiCode: '',
            text: '发送验证码',
            stxt: '',
            isOpened: false,
            icon: ''
        }
    }
    componentWillMount() {
        try {
            var value = Taro.getStorageSync('userInfo')
            if (value) {
                Taro.switchTab({
                    url: '../index/index'
                })
            }
        } catch (e) {
            // Do something when catch error
        }
        console.log('componentWillMount')
    }

    componentDidMount() {
        console.log('componentDidMount')
    }
    onSubmit() {
        let data = {
            phone: this.state.phone,
            smc: this.state.verifiCode
        }
        HTTP(API.SMCLOGIN, data, "POST").then(res => {
            console.log(res)
            if (typeof res == "object") {
                if (res!['code'] == 200) {
                    Taro.setStorage({ key: 'userInfo', data: res!['data'] })
                    Taro.switchTab({
                        url: '../index/index'
                    })
                } else {
                    Taro.showModal({
                        title: '提示',
                        content: res!['message'],
                        showCancel: false,
                        success: function (res) {
                            if (res.confirm) {
                                console.log('用户点击确定')
                            } else if (res.cancel) {
                                console.log('用户点击取消')
                            }
                        }
                    })
                }
            }
        })
    }
    handleChange(value) {
        this.setState({
            phone: value
        })
        return value
    }
    handleCodeChange(value) {
        this.setState({
            verifiCode: value
        })
        return value
    }
    getVerifiCode() {
        let count = 60;
        if (this.state.phone.length != 11) {
            this.setState({
                stxt: '请填写正确的手机号!',
                isOpened: true,
                icon: 'close-circle'
            })
            setTimeout(() => {
                this.setState({
                    isOpened: false,
                })
            }, 1500);
            return
        }
        if (this.state.text === '发送验证码') {
            let data = {
                phone: this.state.phone
            }
            HTTP(API.GETPHONECODE, data, 'POST').then(res => {
                console.log(999, typeof res)
                if (typeof res == "object") {
                    if (res!['code'] == 200) {
                        this.setState({
                            stxt: '验证码已发送，请注意查收!',
                            isOpened: true,
                            icon: 'check-circle'
                        })
                        setTimeout(() => {
                            this.setState({
                                isOpened: false,
                            })
                        }, 3000);

                    } else {
                        Taro.showModal({
                            title: '提示',
                            content: res!['message'],
                            showCancel: false,
                            success: function (res) {
                                if (res.confirm) {
                                    console.log('用户点击确定')
                                } else if (res.cancel) {
                                    console.log('用户点击取消')
                                }
                            }
                        })
                    }
                }
            })
            var timeId = setInterval(() => {
                if (count > 1) {
                    count = count - 1
                    this.setState({
                        text: `${count}秒后重试`
                    })
                } else {
                    this.setState({
                        text: '发送验证码'
                    })
                    return clearInterval(timeId)
                }
            }, 1000);
        } else {
            return
        }

    }
    componentWillUnmount() {
        console.log('componentWillUnmount')
    }

    componentDidShow() {
        console.log('componentDidShow')
    }

    componentDidHide() {
        console.log('componentDidHide')
    }
    /**
     * 指定config的类型声明为: Taro.Config
     *
     * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
     * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
     * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
     */
    config: Config = {
        navigationBarTitleText: '懂调度'
    }

    render() {
        return (
            <View className='index'>
                <View className='img-box'>
                    <Image src={curtainPng} style='width:100%;height:100%' />
                </View>
                <View className='formBox'>
                    <AtForm
                        onSubmit={this.onSubmit.bind(this)}
                    >
                        <AtInput
                            className='input_item'
                            name='phone'
                            title=''
                            type='phone'
                            maxLength={11}
                            placeholder='请输入手机号'
                            value={this.state.phone}
                            border={false}
                            clear
                            onChange={this.handleChange.bind(this)}
                        />
                        <AtInput
                            className='input_item'
                            name='verifiCode'
                            border={false}
                            title=''
                            type='number'
                            placeholder='请输入验证码'
                            value={this.state.verifiCode}
                            onChange={this.handleCodeChange.bind(this)}
                        >
                            <Text className={`smc ${this.state.text === '发送验证码' ? '' : 'act-color'}`} onClick={this.getVerifiCode.bind(this)}>{this.state.text}</Text>
                        </AtInput>
                    </AtForm>
                </View>
                <AtButton type='primary' onClick={this.onSubmit.bind(this)} className='btn'>登录</AtButton>
                <AtToast isOpened={this.state.isOpened} hasMask={true} text={this.state.stxt} icon={this.state.icon}></AtToast>
            </View>
        )
    }
}
